<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <button id="a" class="b" style="color: red;">1</button>
    <button id="b" class="b">2</button>
    <button id="c" class="b">3</button>

    <p id="p1" style="display: block;">1</p>
    <p id="p2">2</p>
    <p id="p3">3</p>

    <script>
        
        var oBtn1 = document.getElementById('a');
        var oBtn2 = document.getElementById('b');
        var oBtn3 = document.getElementById('c');

        var oBtns = [oBtn1 , oBtn2 , oBtn3] ;   // 数组


        var oP1 = document.getElementById('p1');
        var oP2 = document.getElementById('p2');
        var oP3 = document.getElementById('p3');

        var oPs = [oP1 , oP2 , oP3] ;   // 数组

        // 循环绑定事件
        oBtns.forEach(function(v , i){   // i是函数的局部变量
            v.onclick = function() {
                console.log(i);

                // 清除所有的颜色
                oBtns.forEach(function(v2 , j) {
                    v2.style.color = 'black' ;
                    oPs[j].style.display = 'none' ;
                })

                // 给当前 的按钮加颜色
                oBtns[i].style.color = 'red' ;
                oPs[i].style.display = 'block' ;

            }
        })

        



        // function(v , i){  i = 0
        //     v.onclick = function() {
        //         console.log(i);

        //         // 清除所有的颜色
        //         oBtns.forEach(function(v2 , j) {
        //             v2.style.color = 'black' ;
        //             oPs[j].style.display = 'none' ;
        //         })

        //         // 给当前 的按钮加颜色
        //         oBtns[i].style.color = 'red' ;
        //         oPs[i].style.display = 'block' ;

        //     }
        // }

    


        // function(v , 1){
        //     v.onclick = function() {
        //         console.log(i);

        //         // 清除所有的颜色
        //         oBtns.forEach(function(v2 , j) {
        //             v2.style.color = 'black' ;
        //             oPs[j].style.display = 'none' ;
        //         })

        //         // 给当前 的按钮加颜色
        //         oBtns[i].style.color = 'red' ;
        //         oPs[i].style.display = 'block' ;

        //     }
        // }


        // function(v , 2){
        //     v.onclick = function() {
        //         console.log(i);

        //         // 清除所有的颜色
        //         oBtns.forEach(function(v2 , j) {
        //             v2.style.color = 'black' ;
        //             oPs[j].style.display = 'none' ;
        //         })

        //         // 给当前 的按钮加颜色
        //         oBtns[i].style.color = 'red' ;
        //         oPs[i].style.display = 'block' ;

        //     }
        // }



    </script>

</body>

</html>